
<template>
  <div class="main">
    <div class="lang-panel">
      <a class="lang" href="#">中</a>
    </div>
    <swiper :options="swiperOption" class="swiper">
      <swiper-slide style="background-color:#C36622;">
        <div class="flex">
          <div style="position:relative;">
            <img alt src="../assets/bfsm.png" />
            <div
              class="animate__animated animate__pulse animate__infinite"
              style="animation-duration: 2s;width:50px;height:50px;position:absolute;left:-50px;top:-25px; display: flex;justify-content: center;align-items: center;background-color:rgba(255,255,255,0.5);border-radius:50%;"
            >
              <h3 style="font-size:16px">上海</h3>
            </div>
            <div
              class="animate__animated animate__pulse animate__infinite"
              style="animation-duration: 2s;width:50px;height:50px;position:absolute;right:-75px;top:25px; display: flex;justify-content: center;align-items: center;background-color:rgba(255,255,255,0.5);border-radius:50%;"
            >
              <h3 style="font-size:16px">两年</h3>
            </div>
            <div
              class="animate__animated animate__pulse animate__infinite"
              style="animation-duration: 2s;width:50px;height:50px;position:absolute;left:-50px;bottom:-25px; display: flex;justify-content: center;align-items: center;background-color:rgba(255,255,255,0.5);border-radius:50%;"
            >
              <h3 style="font-size:16px">在职</h3>
            </div>
          </div>
          <h1>叶一叶知秋</h1>
          <p>大梦几时休</p>
          <h4>驿创前端工程师</h4>
          <p>
            <a href="mailto:superyexiyu@163.com">superyexiyu@163.com</a>
          </p>
        </div>
      </swiper-slide>
      <swiper-slide style="background-color:#C3B722;">
        <div class="flex">
          <h1>擅长技术</h1>
          <div class="echart" ref="echart"></div>
        </div>
      </swiper-slide>
      <swiper-slide style="background-color:#7FC322;">
        <div class="flex">
          <h1>工作经历</h1>
          <h4>深圳金黄埔基金前端工程师</h4>
          <p>2018年7月-2019年7月</p>
          <p>参与开发了通证交易平台,跨境寄售电商平台等</p>
          <p>相关技术:Bootstrap,jQuery,JavaScript,Vue</p>
          <h4>上海东篱前端工程师</h4>
          <p>2019年8月-2019年11月</p>
          <p>参与开发了多个科研教务管理系统平台等</p>
          <p>相关技术:Avalon,Ane,Axios</p>
          <h4>上海驿创前端开发工程师</h4>
          <p>2019年12月-</p>
          <p>开发了对接商城的后台管理系统,字体识别系统,图片审核系统,qq,微信小程序定制商城等</p>
          <p>相关技术:Vue,element-ui,微信小程序,QQ小程序</p>
        </div>
      </swiper-slide>
      <swiper-slide style="background-color:#2FC322;">
        <div class="flex">
          <h1>作品集</h1>
          <div>
            <ul>
              <li>
                <a href="https://gitee.com/yyyzq001/wxshop">
                  <img alt src="../assets/wxsc.jpg" />
                </a>
                <a href="https://gitee.com/yyyzq001/wxshop">
                  <p>微信商城</p>
                </a>
              </li>
              <li>
                <a href="https://gitee.com/yyyzq001/wxshop">
                  <img alt src="../assets/wxsc.jpg" />
                </a>
                <a href="https://gitee.com/yyyzq001/wxshop">
                  <p>微信商城</p>
                </a>
              </li>
              <li>
                <a href="https://gitee.com/yyyzq001/wxshop">
                  <img alt src="../assets/wxsc.jpg" />
                </a>
                <a href="https://gitee.com/yyyzq001/wxshop">
                  <p>微信商城</p>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide style="background-color:#CB793E;">
        <div class="flex">
          <h1>了解更多</h1>
          <h2>
            <a href="http://yyyzq001.gitee.io/blog">个人主页</a>
          </h2>
          <div class="single">
            <a href="mailto:superyexiyu@163.com" title="superyexiyu@163.com">
              <i class="iconfont iconmailenvelopeletteremailnewsletter"></i>
            </a>
            <a href="https://github.com/yyyzq001" title="github.com/yyyzq001">
              <i class="iconfont icongit"></i>
            </a>
            <a href="https://gitee.com/yyyzq001" title="gitee.com/yyyzq001">
              <i class="iconfont iconmayun"></i>
            </a>
            <a href="#" title="727825023">
              <i class="iconfont iconqq"></i>
            </a>
          </div>
        </div>
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import echarts from 'echarts'
import animate from 'animate.css'

export default {
  name: 'swiper-example-mousewheel-control',
  title: 'Mousewheel control',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  methods: {
    setEchart() {
      let myChart = echarts.init(this.$refs.echart)
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },

        radar: [
          {
            indicator: [
              { text: 'Vue', max: 100 },
              { text: '微信小程序', max: 100 },
              { text: 'HTML', max: 100 },
              { text: 'css', max: 100 },
              { text: 'JavaScript', max: 100 }
            ],
            center: ['50%', '50%'],
            radius: 150
          }
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            areaStyle: {},
            data: [
              {
                value: [80, 60, 70, 70, 70],
                name: '能力值'
              }
            ]
          }
        ],
        textStyle: {
          color: 'rgba(255,255,255,1)',
          fontSize: 22
        }
      })
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.setEchart()
    })
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/base.scss';
@import '../assets/css/iconfont.css';
.lang-panel {
  position: fixed;
  right: 20px;
  top: 20px;
  border-radius: 5px;
  z-index: 100;
  font-size: 14px;
  .lang {
    background-color: #e9c6ac;
    color: #c36622;
    display: inline-block;
    border-radius: 5px;
    padding: 2px 8px;
  }
}

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 10px solid #e9c6ac;
  }
  h1 {
    margin-top: 20px;
    text-shadow: 1px 2px #c36622, 2px 4px #e9c6ac;
    text-align: center;
    font-size: 60px;
  }
  p {
    margin-top: 20px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    a {
      color: #9e4c10;
    }
    a:hover {
      color: #10629e;
    }
  }
  h2 {
    margin-top: 15px;
  }

  h4 {
    margin-top: 10px;
    font-size: 22px;
  }
  .echart {
    margin-top: 20px;
    width: 600px;
    height: 400px;
  }
  ul {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      margin: 10px 20px;
      width: 200px;
      height: 200px;
      background-color: #fff;
      a {
        display: inline-block;
        img {
          display: inline-block;
          width: 200px;
          height: 200px;
          border-radius: 0;
        }
      }
    }
  }
  .single {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    a {
      width: 40px;
      height: 40px;
      margin-right: 5px;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      transition: 0.5s;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    a:hover {
      border-radius: 20%;
    }
  }
}
</style>
